<template>
	<div class="second">
		<div class="second-inner" v-for="(item, index) in showSubMenuData" :key="index">
			<div class="second-title">
				<span v-for="(it, id) in item.data" :key="id">
					<a :href="'/goods/'+it.name+'/1/'" v-show="it.type==='channel'">
						{{it.name}}
						<span class="iconfont icon-xiangyoujiantou"></span>
					</a>
				</span>
			</div>
			<div class="second-content clearfix">
				<span class="second-content-item">
					<span v-for="(it, id) in item.data" :key="id">
						<div class="second-content-item-left fl" v-if="it.type==='dt'">
							<a :href="'/goods/'+it.name+'/1/'">
								{{it.name}}
								<span class="iconfont icon-xiangyoujiantou"></span>
							</a>
						</div>
						<div class="second-content-item-right fl" v-else-if="it.type==='dd'">
							<a :href="'/goods/'+it.name+'/1/'">
								{{it.name}}
							</a>
						</div>
					</span>
					<br />
				</span>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';
import {getSecondMenu} from '@/network/home.js';
import { subMenuProps } from 'element-plus';
	const showSecondMenuIndex = defineProps(['showSecondMenuIndex']);
	
	watch(showSecondMenuIndex,(newvalue,oldvalue)=>{
		// console.log(showSecondMenuIndex)
		getSecondMenu(newvalue.showSecondMenuIndex).then(res=>{
			// console.log(res);
			// console.log(res.data);
			initMenu(res.data)
		})
	})
	
	let subMenuData = ref([]);
	const initMenu = (menuData) => {
		subMenuData.value = [];
		for(let i in menuData){
			subMenuData.value.push(menuData[i]);
		}
		// console.log(subMenuData.value)
	};
	
	const showSubMenuData=computed(()=>{
		let resultList = [];
		let result = {"index":"", "data":[]};
		for (let i in subMenuData.value){
			let sub_id = subMenuData.value[i].submenu_id;
			let data={
				"name": subMenuData.value[i].submenu_name,
				"type": subMenuData.value[i].submenu_type,
			}
			if(result["index"]!=null && sub_id==result["index"]){
				result["data"].push(data);
			}else{
				result = {"index":"", "data":[]};
				result["index"] = sub_id;
				result["data"].push(data);
				resultList.push(result);
			}
		}
		// console.log(resultList)
		return resultList;
	});
	
</script>

<style lang="less" scoped>
@red:#e2231a;
	.second{
		width: 980px;
		// height: 428px;
		background-color: #fff;
		border: 2px solid #e9e9e9;
		padding: 20px;
		.second-inner{
			.second-title{
				a{
					display: inline-block;
					background-color: black;
					color: white;
					margin-right: 10px;
					height: 25px;
					line-height: 25px;
					padding: 0 10px;
					&:hover{
						background-color: @red;
					}
					.iconfont{
						font-size: 10px;
					}
				}
			}
			.second-content{
				margin-top: 15px;
				.second-content-item{
					.second-content-item-left{
						// width: 150px;
						a{
							font-weight: 700;
							&:hover{
								color: @red;
							}
							.iconfont{
								font-size: 10px;
							}
						}
					}
					.second-content-item-right{
						a{
							color: #999;
							margin-left: 10px;
							&:hover{
								color: @red;
							}
						}
					}
					
				}
			}
		}
	}
</style>